<template>
  <div>
    <div class="activemessage-box">
            <div>活动详情</div>
            <div class="active-message">
              <!-- 左盒子 -->
              <div>
                <div class="active-message" @click="open1">
                  <div class="div">{{ mydata }}</div>
                  <!-- <div class="div">4</div> -->
                  <!-- <div class="div">0</div> -->
                </div>
                <div style="text-align: center;">历史活动</div>
              </div>
              <!-- 右盒子 -->
              <div>
                <div class="active-message" @click="open2">
                  <div class="div">{{ mynewdata }}</div>
                  <!-- <div class="div">2</div>
                  <div class="div">0</div> -->
                </div>
                <div style="text-align: center;">最新活动</div>
              </div>
            </div>
          </div>
          <!-- 弹框 -->
          <Activedetailprop :activedialog="activedialog1" type="2" @openactivedialog="openactivedialogval1"></Activedetailprop>
          <Activedetailprop :activedialog="activedialog2" type="1" @openactivedialog="openactivedialogval2"></Activedetailprop>
  </div>
</template>

<script>
import {
  managementHistoryList,
  managementNewList,
  selectStarUser,
  getselectMoneyNum,
  selectCountMessage,
  getHonorsList
} from "@/api/bigscreen/bigscreen.js";
import Activedetailprop from "../activedetailprop/activedetailprop.vue";
export default {
  components: {
    Activedetailprop},
  data(){
    return {
      mydata: "",
      mynewdata:'',
      activedialog1:false,
      activedialog2:false
    }
  },
  mounted(){
    this.getData()
  },
  methods: {
     // 获取历史活动
     getData() {
      managementHistoryList().then((res) => {
        if (res.code === 200) {
          this.mydata = res.total;
        }
      });
      managementNewList().then((res) => {
        if (res.code === 200) {
          this.mynewdata = res.total;
        }
      });
    },
    open1(){
    this.activedialog1 = true
    },
    open2(){
    this.activedialog2 = true
    },
    openactivedialogval1(event){

      this.activedialog1 = event
    },
    openactivedialogval2(event){

      this.activedialog2 = event
    }
  }
}
</script>

<style lang="scss" scoped>
$color-blue: #0d3d7f;
$font-color: #09f5fc;
$text-color: #fff;
.activemessage-box {
  padding: 16px;
  color: $font-color;
  .active-message {
    display: flex;
    justify-content: space-between;
    color: $text-color;
    padding: 16px 12px;
    .number {
      color: #f59a23;
      font-weight: 700;
      text-align: center;
    }
    .div {
      //  padding: 20px;
      height: 40px;
      width: 55px;
      line-height: 40px;
      text-align: center;
      // background-color: pink;
      border: $font-color 1px solid;
      border-radius: 5px;
    }
  }
}
</style>
